extend personLeft.pug

block append pageStyle
	link(href='${relativePath}/static/css/personCenter/receveAddress.css' type="text/css" rel="stylesheet")
	link(href='${relativePath}/static/css/personCenter/personIndex.css' type="text/css" rel="stylesheet")

block personRight
	div.rightContent.fl
		//- 收货地址
		div.addAddressBtn 添加收货地址
		div.addressContent
			div.addressImg
			form#addressSubmit
				div.row
					label 省、市、区：
					div#city
						select#sheng(name="area")
							option(value="") 请选择
						select#shi(name="area")
							option(value="") 请选择
						select#qu(name="area")
							option(value="") 请选择
				div.row.detailAddress
					label 详细地址：
					textarea.detailAddress(row="3" cols="10" name="detailAddress")
				div.row
					label
					span.fl *请填写详细的收货地址，街道门牌楼层等
				div.row
					label 收货人姓名：
					input.txt.shrName(type="text" name="shrName")
				div.row
					label 手机：
					input.txt.phoneNum(type="text" name="phoneNum")
				div.row.addressTxt
					label
						input.checkbox.setDie(type="checkbox" name="mrAddress")
						|   设为默认收货地址
				div.bottomBtn
					span.sureAddress 确认地址
					span.sureAddress1 确认地址
					span.delete 取消
				div.clear
		//- 收货地址列表
		div.receveBox
			//- div.receveList
			//- 	div.name 王二妞
			//- 	div.detailDress 河南省郑州市经开区南三环经开二十五大街交叉口索凌电气四楼河南省标识汇网络科技有限公司
			//- 	div.emailCode 45000
			//- 	div.phoneNum 12345678956
			//- 	div.modify.fr
			//- 		a(href="javascript:;") 修改
			//- 		a.remove(href="javascript:;") 删除
	//- 收货地址模板
	script#addressLists(type="text/html")
		| {{each data arr}}
		div.receveList(id="{{arr.id}}")
			div.name {{arr.accept_name}}
			div.detailDress {{arr.province_name}}{{arr.city_name}}{{arr.area_name}}{{arr.address}}
			//- div.emailCode {{45000}}
			div.phoneNum {{arr.mobile}}
			div.modify.fr
				a.modifyBtn(href="javascript:;") 修改
				a.remove(href="javascript:;") 删除
		| {{/each}}

block append pageScript
	script(src="${relativePath}/static/js/jquery.validate.min.js")
	


	script.
		var ID;
		$(function(){
			//- 当前选中
			$("#shAddress").addClass("current").siblings().removeClass("current");

			//- 点击切换导航
			$(".btnList li").click(function(){
				$(this).addClass("current").siblings().removeClass("current");
			})
			//- 省市区
			// 默认只把省份数据加载，市和区事件加载
			FillSheng();

			$("#sheng").change(function(){
				FillShi($(this).val());
			})//给sheng菜单添加点击事件
			
			$("#shi").change(function(){
				FillQu($(this).val());
			})

			/*省*/
			function FillSheng(){
				$.getJSON(shopIp+"/region/getSubRegions?callback=?",{
					userToken:token,
					os:"web",
					region_Id:1
				},function(data){
					//给一个默认值
					var str = "<option value=''>请选择</option>";
					for(var i=0;i<data.data.length;i++) {
						str += "<option value='"+data.data[i].region_id+"'>"+data.data[i].region_name+"</option>";
						$("#sheng").html(str);
					}
				})
			}
			/*市*/
			function FillShi(parentId, selectedId){
				//判断为空，不加载数据
				if(!parentId) {
					return;
				}
				$.getJSON(shopIp+"/region/getSubRegions?callback=?",{
					userToken:token,
					os:"web",
					region_Id:parentId
				},function(data){
					//console.log(data);
					var str = "<option value=''>请选择</option>";
					for(var i=0;i<data.data.length;i++) {
						str += "<option value='" + data.data[i].region_id + "'";
						str += (selectedId && selectedId == data.data[i].region_id) ? " selected='selected'" : "";
						str += ">" + data.data[i].region_name + "</option>";
						$("#shi").html(str);
						
					}
					
				})
			}
			/*区*/
			function FillQu(parentId, selectedId){
				//判断为空，不加载数据
				if(!parentId) {
					return;
				}
				$.getJSON(shopIp+"/region/getSubRegions?callback=?",{
					userToken:token,
					os:"web",
					region_Id:parentId
				},function(data){
					var str = "<option value=''>请选择</option>";
					for(var i=0;i<data.data.length;i++) {
						str += "<option value='"+data.data[i].region_id+"'";
						str += (selectedId && selectedId == data.data[i].region_id) ? " selected='selected'" : "";
						str += ">" + data.data[i].region_name+"</option>";
						$("#qu").html(str);
					}
					
				})
			}
			
			//- 点击添加收货地址
			$(".addAddressBtn").click(function(){
				$("#addressSubmit").show();
				$("#addressSubmit .sureAddress").show();
				$(".detailAddress").val("");
				$(".phoneNum").val("");
				$(".shrName").val("");
				$(".setDie").attr("checked",false);
				$("#addressSubmit .sureAddress1").hide();
				$(".imgBig").hide();
			})

			$(".bottomBtn .delete").click(function(){
				$("#addressSubmit").hide();
				$(".detailAddress").val("");
				$(".phoneNum").val("");
				$(".shrName").val("");
				$(".setDie").attr("checked",false);
			})

			//- 电话号码验证
			jQuery.validator.addMethod("isMobile", function(value, element) {
				var length = value.length;
				var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
				return this.optional(element) || (length == 11 && mobile.test(value));
			}, "请正确填写您的手机号码");
			//- 点击确认地址
			var validator = $("#addressSubmit").validate({
					rules: {
						codeNum:{
							number:true,
							minlength:6,
							maxlength:6
						},
						area:{
							required:true
						},
						detailAddress:{
							required : true,
						},
						phoneNum:{
							required:true,
							isMobile:true
						},
						shrName:{
							required: true
						},
					},
					messages : {
						codeNum:{
							required : "请输入正确的邮政编码"
						},
						area:{
							required:"请选择省、市、区"
						},
				        detailAddress : {
							required : "请输入详细地址"
				        },
				        phoneNum:{
				        	required:'请输入手机号'
				        },
				        shrName:{
				        	required:'请输入收货人姓名'
				        }
				    },
					errorPlacement: function(error, element) {  
						error.appendTo(element.closest(".row"));
						if(element[name="area"]) {
							error.after(element.closest("#qu"));
						}
					}
				});
			$(".sureAddress").click(function(){
				if(validator.form()){
					addAddress("");
					$("#addressSubmit").hide();
					addressAll();
				}
			})
			$(".sureAddress1").click(function(){
				if(validator.form()){
					addAddress(ID);
					$("#addressSubmit").hide();
					$("#addressSubmit").reset();
				}
			})

			
			//- 添加收货地址
			function addAddress(id) {
				var acqu;
				var type;
				if($("input[name='mrAddress']").is(':checked')) {
					acqu =1;
				}else{
					acqu =0;
				};
				//console.log(acqu);
				$.getJSON(shopIp+"/Address/addAccept?callback=?",{
					userToken:token,
					os:"web",
					accept_name:$(".shrName").val(),
					province:$("#sheng option:selected").attr("value"),
					city:$("#shi option:selected").attr("value"),
					area:$("#qu option:selected").attr("value"),
					address:$("textarea[name='detailAddress']").val(),
					mobile:$(".phoneNum").val(),
					acqu:acqu,
					id:id
				},function(data){
					if(data.status == 200) {
						layer.msg('地址添加成功!');
						$(".imgBig").hide();
						setTimeout(function() {
							location.reload();
						},1000);
					}
				})
			}
			//- 收货地址列表
			function addressAll() {
				$(".receveBox").html("");
				$.getJSON(shopIp+"/Address/lst?callback=?",{
					userToken:token,
					os:"web"
				},function(data){
					var addressList = template("addressLists",data);
					//console.log(addressList);
					if( data.data == "") {
						$(".addressImg").html("<img class='imgBig' src='${relativePath}/static/imgs/zw.png'/>");
						$(".addressImg").css("text-align","center");
					}else{
						$(".receveBox").append(addressList);
					}
				})
			}
			addressAll();
			//- 点击修改地址
			$(".receveBox").on("click",".modifyBtn",function() {
				ID = $(this).closest(".receveList").attr("id");
				//console.log($("#sheng").val());
				$("#addressSubmit").show();
				$("#addressSubmit .sureAddress").hide();
				$("#addressSubmit .sureAddress1").css("display","inline-block");
				$.getJSON(shopIp+"/Address/addressInfo?callback=?",{
					userToken:token,
					os:"web",
					id:$(this).closest(".receveList").attr("id")
				},function(data) {
					var dataList = data.data;
					//- 省市区
					var provice = dataList.city_name;
					//console.log(provice);
					var shi = dataList.province_name;
					var area = dataList.area_name;
					var phone = dataList.mobile;
					var shr = dataList.accept_name;
					var shAddress = dataList.address;
					var acqu = dataList.acqu;
					//console.log($("#sheng").val());
					//console.log('<option>'+provice+'</option>');
					$("#sheng").val(dataList.province);
					FillShi(dataList.province, dataList.city);
					FillQu(dataList.city, dataList.area);
					$(".phoneNum").val(phone);
					$(".shrName").val(shr);
					$("textarea[name='detailAddress']").val(shAddress);
					if(acqu == 1) {
						$("input[name='mrAddress']").attr('checked','checked');
					}else{
						$("input[name='mrAddress']").attr('checked','');
					}
				})
			})

			//- 点击删除收货地址
			$(".receveBox").on("click",".remove",function(){
				var $this = $(this);
				layer.confirm('确定删除此收货地址？', {
					btn: ['确定','取消'],//按钮
					title:"删除收货地址"
				}, function(){
					$.post(shopIp+"/Address/delAccept",{
						userToken:token,
						id:$this.closest(".receveList").attr("id"),
					},function(data) {
						//console.log(data.msg);
						if(data.status == "200") {
							layer.msg(data.msg, {icon: 1});
							$this.closest(".receveList").remove();
						} else{
							layer.msg(data.msg);
						}
					})
				}, function(){
						//layer.msg('已取消');
				});
			})
		})


